<template>
    <view class="content">
        <view class="head-wrap">
            <image src="@/static/images/bg.jpg" mode="scaleToFill" class="bg" />
            <view class="head-wrap-info">
                <view class="head-wrap-info-content">
                    <view class="head-wrap-info-content-left">
                        <view class="head-wrap-info-content-left-name">即刻加入认证专区</view>
                        <view class="head-wrap-info-content-left-tip">完成认证审核就可以接单啦</view>
                    </view>
                    <view class="head-wrap-info-content-right">
                        <image src="@/static/images/index/settled_tip.png" mode="scaleToFill"
                            style="width: 100%;height: 100%;" />
                    </view>
                </view>
                <view class="head-wrap-info-step">
                    <up-steps :current="state.current" activeColor="#F2CB51" dot>
                        <up-steps-item title="实名认证">
                            <template #icon>
                                <text class="slot-icon">1</text>
                            </template>
                        </up-steps-item>
                        <up-steps-item title="学历认证">
                            <template #icon>
                                <text class="slot-icon">2</text>
                            </template>
                        </up-steps-item>
                        <up-steps-item title="简历认证">
                            <template #icon>
                                <text class="slot-icon">3</text>
                            </template>
                        </up-steps-item>
                    </up-steps>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="main-wrap" v-if="state.current==0">
                <view class="main-wrap-title">请完善个人信息</view>
                <up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef">
                    <up-form-item label="姓名" prop="userInfo.fullName" :labelWidth="70" borderBottom ref="item1">
                        <up-input v-model="state.model.userInfo.fullName" :disabled="state.storageRealInfo.fullName"
                            disabledColor="#ffffff" border="none" placeholder="请输入姓名"></up-input>
                    </up-form-item>
                    <!-- <up-line></up-line> -->
                    <up-form-item label="身份证" prop="userInfo.idCard" :labelWidth="70" ref="item1">
                        <up-input v-model="state.model.userInfo.idCard" :disabled="state.storageRealInfo.idCard"
                            disabledColor="#ffffff" border="none" placeholder="请输入身份证号"></up-input>
                    </up-form-item>
                </up-form>
            </view>
            <view v-if="state.current==1">
                <xueli-detail ref="xueliRef"></xueli-detail>
            </view>
            <view v-if="state.current==2">
                <resume-detail ref="resumeRef"></resume-detail>
            </view>
            <view class="main-action">
                <up-button @click="submit" class="main-action-button" :text="state.current==2?'提交审核':'下一步'"></up-button>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';

const { proxy } = getCurrentInstance()

const xueliRef = ref(null)
const resumeRef = ref(null)
// 使用 reactive 创建响应式状态  
const state = reactive({
    showSex: false,
    storageRealInfo: {},
    storageXueliInfo: {},
    storageResumeInfo: {},
    model: {
        userInfo: {
            fullName: "",
            idCard: "",
        },
    },
    rules: {
        'userInfo.fullName': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change'],
        },
        'userInfo.idCard': {
            type: 'string',
            required: true,
            message: '请填写身份证号',
            trigger: ['blur', 'change'],
        },
    },
    current: 0
});


// 使用 ref 创建响应式引用  
const formRef = ref(null);


async function getInfo1() {
    // 获取实名认证信息
    const res = await proxy.request('/user/auth/get', {}, {
        method: "GET"
    })
    if (res.data.data && res.data.data.id) {
        state.model.userInfo = res.data.data
        state.storageRealInfo = res.data.data
    }
}
async function getInfo2() {
    // 获取学历认证信息
    const res = await proxy.request('/user/ducation/auth/getlist', { state: 1 }, {
        method: "GET"
    })
    if (res.data.data && res.data.data.id) {
        state.storageXueliInfo = res.data.data
        console.log(state.storageXueliInfo, 'state.storageXueliInfo')
    }

}
async function getInfo3() {
    // 获取简历认证信息
    const res = await proxy.request('/blurb/get', { type: 1 }, {
        method: "GET"
    })
    if (res.data.data && res.data.data.id) {
        state.storageResumeInfo = res.data.data
        console.log(state.storageResumeInfo, 'state.storageResumeInfo')
    }
}

function submit() {
    if (!state.storageRealInfo['id']) {
        formRef.value?.validate().then(async (valid) => {
            if (valid) {
                uni.showLoading()
                const res = await proxy.request('/user/auth/save', state.model.userInfo, {
                    methods: 'POST'
                })
                if (res.code == 200 || res.msg == '已审核！') {
                    next()
                } else {
                    uni.$u.toast(res.msg || '提交失败')
                }
            } else {
                uni.$u.toast('请检查信息是否填写完整')
            }
        }).catch(() => {
            uni.$u.toast('请检查信息是否填写完整')
        });
    } else {
        next()
    }
}

function next() {
    if (state.current == 0) {
        getInfo2()
        state.current = state.current + 1
    }
    if (state.current == 1) {
        getInfo3()
        xueliRef.value?.submit().then(() => {
            state.current = state.current + 1
        }).catch(() => {

        })
    }
    if (state.current == 2) {
        resumeRef.value?.submit().then(() => {
            // uni.$u.toast('提交成功')
            uni.showModal({
                title: '提示',
                content: '提交成功，等待管理员审核',
                success: async function (modalRes) {
                    if (modalRes.confirm) {
                        uni.switchTab({
                            url: "/pages/index/index"
                        })
                    } else if (modalRes.cancel) {
                        uni.switchTab({
                            url: "/pages/index/index"
                        })
                    }
                }
            });
        }).catch(() => {

        })
    }

}

onMounted(() => {
    getInfo1()

})
</script>
<style lang="scss">
page {
    background-color: #F5F5F5;
}

::v-deep .u-steps-item__wrapper {
    background-color: transparent !important;
}

::v-deep .u-action-sheet__item-wrap {
    overflow: auto;
    max-height: 50vh;
}
</style>
<style lang="scss" scoped>
.head-wrap {
    position: relative;

    .bg {
        width: 100%;
        margin-top: -88rpx;
    }

    &-info {
        position: absolute;
        top: 36rpx;
        left: 32rpx;
        right: 32rpx;

        &-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 220rpx;

            &-left {
                &-name {
                    margin-bottom: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 48rpx;
                    color: #FFFFFF;
                    line-height: 56rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &-tip {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            &-right {
                width: 220rpx;
                height: 220rpx;
            }
        }

        &-step {
            margin-top: 44rpx;
            height: 136rpx;
            display: flex;
            align-items: center;
            background-color: #faefce;
            border-radius: 12rpx 12rpx 12rpx 12rpx;

            .slot-icon {
                width: 21px;
                height: 21px;
                background-color: $u-warning;
                border-radius: 100px;
                font-size: 12px;
                color: #fff;
                line-height: 21px;
                text-align: center;
            }
        }
    }
}

.main {
    margin-top: 64rpx;
    padding: 32rpx;

    &-wrap {
        height: 272rpx;
        background: #FFFFFF;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        &-title {
            height: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #323232;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

    }

    &-action {
        margin-top: 32rpx;

        ::v-deep .u-button {
            width: 480rpx;
            height: 80rpx;
            background: #F2CB51;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
        }

    }
}
</style>